<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1.1.1-命令式和生命式</title>
</head>
<body>
    
</body>
    <script>
        /**
         * 从范式上来看，视图层框架通常分为命令式和声明式
         * 
         * 命令式框架的一大特点就是关注过程。
         * - jQuery 就是典型的命令式框架
         * - 自然语言描述能够与代码产生一一对应的关系，
         *    代码本身描述的是“做事的过程”
         * 
         * 声明式框架更加关注结果
         * - Vue.js
         * - 我们提供的是一个“结果”
         *    至于实现该“结果”的过程，则是由 Vue.js 帮我们完成的
         * - Vue.js 的内部实现一定是命令式的，而暴露给用户的却更加声明式
        */

        /**
         *  01 - 获取 id 为 app 的 div 标签
         *  02 - 它的文本内容为 hello world
         *  03 - 为其绑定点击事件
         *  04 - 当点击时弹出提示：ok
         * */ 

        // jQuery 的代码示例
         $('#app') // 获取 div
            .text('hello world') // 设置文本内容
            .on('click', () => { alert('ok') }) // 绑定点击事件

        // 原生 JavaScript 来实现同样的功能
        const div = document.querySelector('#app') // 获取 div
        div.innerText = 'hello world' // 设置文本内容
        div.addEventListener('click', () => { alert('ok') }) // 绑定点击事件

        // Vue.js 实现如上功能的方式
        // <div @click="() => alert('ok')">hello world</div>
    </script>
</html>